<!--
 * @Description: {{ByRuin}}
 * @Version: 2.0
 * @Author: Ruin 🍭
 * @Date: 2021-12-28 14:23:05
 * @LastEditors: 刘引
 * @LastEditTime: 2022-01-04 16:47:19
-->
<template>
  <div class="number">
    <div class="w">
      <div class="container" v-if="this.$store.state.isChange == false">
        <div class="introduce">
          <ul>
            <li>
              95%
              <br />
              <span>累计成功元器件采购占比</span>
            </li>
            <li>
              9800
              <span>w次</span>
              <br />
              <span>每年咨询元器件报价</span>
            </li>
            <li>
              12000
              <span>小时</span>
              <br />
              <span>用户咨询时长总时间</span>
            </li>
            <li>
              150
              <span>w次</span>
              <br />
              <span>每年帮助用户采购</span>
            </li>
          </ul>
        </div>
        <div class="btn">
          <a href="tencent://message/?uin=2355608068&Site=Sambow&Menu=yes">了解更多</a>
        </div>
      </div>
      <div class="container" v-if="this.$store.state.isChange">
        <div class="introduce">
          <ul>
            <li>
              95%
              <br />
              <span>Proportion of successful procurement</span>
            </li>
            <li>
              9,800,000
              <!-- <span></span> -->
              <br />
              <span>Consult the quotation of components for every year</span>
            </li>
            <li>
              12,000
              <span>h</span>
              <br />
              <span>Total time of user consultation time</span>
            </li>
            <li>
              1,500,000
              <!-- <span>w次</span> -->
              <br />
              <span>Number of helping users purchase for year</span>
            </li>
          </ul>
        </div>
        <div class="btn" style="margin-top:60px">
          <a href="tencent://message/?uin=2355608068&Site=Sambow&Menu=yes">Learn more</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script></script>
<style lang="scss" scoped>
.number {
  margin-top: 70px;
  height: 350px;
  width: 100vw;
  // background-color: red;
  background-image: url("../../../assets/img/home/bg.png");
  background-repeat: no-repeat;

  background-size: cover;
  .w {
    .container {
      height: 350px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      .introduce {
        padding-top: 100px;

        ul {
          display: flex;
          li {
            // width: 300px;
            display: block;
            // width: 176px;
            padding: 0 40px;
            font-size: 32px;
            height: 72px;
            line-height: 36px;
            border-right: 1px solid #ccc;
            text-align: center;
            span {
              font-size: 16px;
            }
            &:nth-child(4) {
              border-right: none;
            }
          }
        }
      }
      .btn {
        width: 200px;
        height: 40px;
        background-color: #0c7fea;
        text-align: center;
        line-height: 40px;
        border-radius: 4px;
        margin-top: 50px;
        a {
          width: 200px;
          height: 40px;
          display: block;
        }
        cursor: pointer;
        &:hover {
          background-color: #185bb1;
          transition: all 0.2s;
        }
      }
    }
  }
}
</style>